<template>
    <div class="tab-title-page p_list">
      <el-tabs v-model="activeName" class="flex-1 nav_tabs" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabList" :key="item.id" :name="item.id + ''">
          <p slot="label" class="text-center" style="line-height:20px;">
            <span>{{ item.name }}</span></p>
        </el-tab-pane>
      </el-tabs>
      <el-divider class="middle_divider" />
      <div class="child_page">
        <div class="common_form_search">
          <el-form :inline="true" :model="searchForm">
            <el-form-item label="商品名称">
              <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable />
            </el-form-item>
            <el-form-item label="供应商">
              <el-input v-model="searchForm.shopName" placeholder="请输入供应商" clearable />
            </el-form-item>
            <el-form-item label="商品品类">
              <el-select v-model="searchForm.categoryId" placeholder="请选择商品品类" clearable>
                <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="searchForm.status" placeholder="全部" clearable>
                <el-option label="上架推广" value="2" />
                <el-option label="下架推广" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="search()">查询</el-button>
              <el-button size="small" @click="reset()">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-divider />
        <div style="padding:0 30px">
          <div class="flex align-center table-top-btns">
            <h5 class="flex align-center">
              <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
            </h5>
            <el-button size="small" class="add-btn" icon="el-icon-plus" @click="openAdd()">添加商品</el-button>
          </div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column align="center" label="排序" width="80">
              <template slot-scope="scope">
                <span v-if="!$hasMethod('#sort')">{{ scope.row.sort }}</span>
                <el-input v-else v-model="scope.row.sort" oninput="value=value.replace(/[^\d]/g,'')" maxlength="9" @change="changeSort(scope.row.id, scope.row.sort)" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="商品信息" width="500">
              <template slot-scope="scope">
                <div class="flex">
                  <el-image style="width: 60px; height: 60px" :src="scope.row.imgurl ? $globalObj.imgBaseUrl + scope.row.imgurl : ''">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" />
                    </div>
                  </el-image>
                  <div class="flex-1 text-left" style="padding-left:15px;">
                    <p class="color-999">{{ scope.row.goods_id }}</p>
                    <p class="blue-font">{{ scope.row.title }}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="category_name" label="品类" align="center" />
            <el-table-column prop="shelves_time" label="上架时间" align="center" width="100" />
            <el-table-column prop="shopname" label="供应商" align="center" />
            <el-table-column fixed="right" label="操作" width="180" align="center">
              <template slot-scope="scope">
                <el-button type="warning" size="mini" @click="changeStatus(scope.row.id, scope.row.status)">{{ scope.row.status == 2 ? '下架推广' : '上架推广' }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <custom-page ref="customPage" :total="total" @getList="getList" />
        </div>
      </div>
      <!-- <goods-dialog ref="goodsDialog" :cate-id="activeName" @getList="getList" /> -->
      <add-goods ref="addGoods" :cate-id="activeName" @getList="getList" />
    </div>
  </template>
  
  <script>
  import { listCategoryList2, setListSort, goodsList, setListStatus } from '@/api/xcx'
  import { getCategory } from '@/api/audit'
  import customPage from '@/components/customPage'
  import goodsDialog from './goods'
  import addGoods from './components/addGoods'
  export default {
    components: { customPage, goodsDialog, addGoods },
    data() {
      return {
        searchForm: {
          goodsName: '',
          shopName: '',
          categoryId: '',
          status: ''
        },
        activeName: '',
        total: 0,
        tableData: [],
        tabList: [],
        categoryList: []
      }
    },
    mounted() {
      this.getClassify()
      this.getSelectList()
    },
    methods: {
      // 上架/下架推广
      changeStatus(id, status) {
        let tip = ''
        let title = ''
        if (status === 2) {
          tip = '您确定要下架推广吗？'
          title = '下架推广'
        } else {
          tip = '您确定要上架推广吗？'
          title = '上架推广'
        }
        this.$confirm(tip, title, {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          setListStatus({
            id,
            status: status === 2 ? 1 : 2
          }).then(res => {
            this.getList(true)
          })
        }).catch(() => { })
      },
      // 更改排序
      changeSort(id, val) {
        setListSort({
          id: id,
          sort: val
        }).then(res => {
          this.getList(true)
        })
      },
      getList(flag) {
        // flag为true, 则不刷新表格
        const { page, pageSize } = this.$refs.customPage
        if (!flag) {
          this.tableData = []
        }
        goodsList({
          page,
          pageSize,
          listCateId: this.activeName,
          ...this.searchForm
        }).then(res => {
          this.tableData = res.data || []
          this.total = res.total
        })
      },
      getClassify() {
        listCategoryList2().then(res => {
          this.tabList = res || []
          this.activeName = this.tabList[0] ? this.tabList[0].id + '' : ''
          this.getList()
        })
      },
      // 查询
      search() {
        this.$refs.customPage.page = 1
        this.getList()
      },
      // 重置
      reset() {
        this.searchForm = {
          goodsName: '',
          shopName: '',
          categoryId: '',
          status: ''
        }
        this.$refs.customPage.page = 1
        this.getList()
      },
      handleClick(tab) {
        this.activeName = tab.name
        this.$refs.customPage.page = 1
        this.reset()
      },
      getSelectList() {
        getCategory().then(res => {
          this.categoryList = res || []
        })
      },
      openAdd() {
        this.$refs.addGoods.dialogVisible = true
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .common_form_search {
    padding: 15px 30px 0;
  }
  
  .child_page {
    padding-bottom: 15px;
  }
  
  .nav_tabs {
    padding-top: 15px;
  }
  </style>
  